<template>
	<view class="content">

		<!-- 政策部分 -->
		<view style="font-weight: bold;font-size: 30rpx;margin: 36rpx 0 0rpx 24rpx;">物流政策</view>
		<view class="policy_div">
			<view v-for="(item,index) in policy_list" class="item_div" @click="onClickPolicy(item)">
				<view class="policy_txt">[政策]{{item.title}}</view>
			</view>
		</view>

		<!-- 发货入口 -->
		<view class="fh_div">
			<view class="fh_item" style="margin: 0 12rpx 0 0;" @click="onMenu(1)">
				<view class="fh_txt">一键发货</view>
				<image src="/static/ic_home_menu_01.png" style="width: 70rpx;height: 70rpx;"></image>
			</view>
			<view class="fh_item" style="margin: 0 0rpx 0 12rpx;" @click="onMenu(2)">
				<view class="fh_txt">物流园区</view>
				<image src="/static/ic_home_menu_02.png" style="width: 70rpx;height: 70rpx;"></image>
			</view>
			<!-- <view class="fh_item" style="margin: 0 0rpx 0 12rpx;" @click="onMenu(99)">
				<view class="fh_txt">更多功能</view>
				<image src="/static/ic_home_menu_99.png" style="width: 70rpx;height: 62rpx;"></image>
			</view> -->
		</view>

		<!-- 查询部分 -->
		<view class="query_div">
			<view class="query_header">
				<view :class="curr_query == 1 ? 'query_item_sel' : 'query_item'" @click="onChangeQuery(1)">查线路</view>
				<view :class="curr_query == 2 ? 'query_item_sel' : 'query_item'" @click="onChangeQuery(2)">查公司</view>
				<view :class="curr_query == 3 ? 'query_item_sel' : 'query_item'" @click="onChangeQuery(3)">查运单</view>
			</view>

			<!-- 查询线路的布局 -->
			<view v-if="curr_query == 1" style="display: flex;align-items: center;width: 90%;justify-content:space-between;padding: 24rpx 0 0 0;">
				<input :value="line_from" class="et_line" @input="onInputLineFrom" />
				<image src="/static/ic_right_arrow.png" style="width: 64rpx;height: 64rpx;" @click.stop="onSwitchLine"></image>
				<input :value="line_to" class="et_line" style="text-align: right;" @input="onInputLineTo" />
			</view>

			<!-- 查询公司的布局 -->
			<view v-if="curr_query == 2" style="display: flex;align-items: center;width: 90%;justify-content:space-between;padding: 24rpx 0 0 0;">
				<input :value="com_name" class="et_com_order" placeholder="请输入公司名称" @input="onInputCom" />
			</view>

			<!-- 查询运单的布局 -->
			<view v-if="curr_query == 3" style="display: flex;align-items: center;width: 90%;justify-content:space-between;padding: 24rpx 0 0 0;">
				<input :value="order_no" class="et_com_order" placeholder="请输入运单号" @input="onInputOrder" />
			</view>

			<view style="width: 90%;height: 1rpx;background-color: #f0f0f0;margin: 0rpx 0 0 0;"></view>

			<view class="btn_ok_2" @click.stop="onOk">立即查询</view>
			<view class="btn_ok" @click.stop="onOk2">语音搜索</view>

			<!-- 占位布局 -->
			<view style="width: 100rpx;height: 36rpx;"></view>

		</view>

		<!-- 物流/线路列表 -->
		<view style="font-weight: bold;font-size: 30rpx;margin: 24rpx 0 12rpx 24rpx;">精品物流</view>

		<view v-for="(item,index) in data_list" class="item_2_div" @click.stop="onItemClick(item)">
			<!-- 图片 名称 线路 电话 -->
			<view style="display: flex;align-items: center;justify-content: space-between;">
				<!-- 图片 名称 线路 -->
				<view style="display: flex;">
					<!-- 图片 -->
					<image style="width: 130rpx;height: 130rpx;" src="/static/ic_fwl.png"></image>
					<!-- 名称 线路 -->
					<view style="display: flex;flex-direction: column;">
						<view style="margin: 8rpx 0 0 16rpx;font-size: 28rpx;font-weight: bold;">{{item.company_name}}</view>
						<view style="margin: 8rpx 0 0 16rpx;font-size: 26rpx;">{{item.trace[0].line_name}}</view>
						<view style="margin: 4rpx 0 0 16rpx;font-size: 24rpx;color: #666;display: flex;align-items: center;">
							<view v-if="!item.score || item.score < 60" style="color: orange;margin: 0 12rpx 0 0;">评价★</view>
							<view v-if="item.score >= 60 && item.score < 70" style="color: orange;margin: 0 12rpx 0 0;">评价★★★</view>
							<view v-if="item.score >= 70 && item.score < 90" style="color: orange;margin: 0 12rpx 0 0;">评价★★★★</view>
							<view v-if="item.score >= 90" style="color: orange;margin: 0 12rpx 0 0;">评价★★★★★</view>
							<view v-if="item.is_audit == 1" style="color: orange;margin: 0 12rpx 0 0;">已认证✔</view>
							<view v-else style="color: #999;margin: 0 12rpx 0 0;">未认证✖</view>
						</view>
					</view>
				</view>
				<!-- 电话 -->
				<view style="display: flex;flex-direction: column;">
					<image style="width: 44rpx;height: 44rpx;" src="/static/ic_phone.png" @click.stop="onPhone(item)"></image>
					<image style="width: 44rpx;height: 44rpx;margin: 16rpx 0 0 0;" src="/static/ic_navigate.png" @click.stop="onNavigate(item)"></image>
				</view>
			</view>
			<!-- 发站 到站 -->
			<view style="display: flex;flex-direction: column;margin: 16rpx 0 0 0;">
				<view style="display: flex;align-items: center;">
					<view class="tag">发站</view>
					<view class="tag_txt">{{ item.trace[0].site[0].address }}</view>
				</view>
				<view style="display: flex;align-items: center;margin: 8rpx 0 0 0;">
					<view class="tag">到站</view>
					<view class="tag_txt">{{item.trace[0].unloadsite[0].address }}</view>
				</view>
			</view>
		</view>

		<!-- 展示弹窗 -->
		<view>
			<uni-popup ref="popup" type="center" border-radius="10px 10px 0 0" :is-mask-click="false">
				<view class="pop_div">
					<view class="pop_div_1">
						扫码评价
						<view style="width: 100%;height: 1px;background-color: rgba(1, 1, 1, 0.15);"></view>
					</view>

					<view class="pop_div_2">
						<view class="pop_div_2_1">
							<view class="pop_div_2_1_hint">请提示用户扫码评价</view>
						</view>
						<view>
							<!-- <image class="img_qrcode" mode="aspectFit" :src="qrdata"></image> -->
							<uqrcode ref="uqrcode" canvas-id="qrcode" :value="genQrContent()"></uqrcode>
						</view>
						<view class="pop_div_2_1">
							<view> </view>
							<view class="pop_div_2_1_hint">请向客户展示</view>
						</view>
					</view>

					<view class="pop_div_3">
						<view style="width: 100%;height: 1px;background-color: rgba(1, 1, 1, 0.15);"></view>
						<view @click="onClosePop">关闭</view>
					</view>
				</view>
			</uni-popup>
		</view>

	</view>
</template>

<script>
	import { URL } from '@/http/request.js'
	import { getUInfo, timestampToYMDHM, isLogin } from '@/util/util.js'
	import { checkUpdate, openLocation } from '@/util/uni_util.js'
	const base64 = require('@/util/oss/base64.js')
	export default {
		data() {
			return {

				policy_list: [
					{ title: '关于印发临沂市物流业中长期发展规划的通知', url: 'http://www.linyi.gov.cn/info/9319/332885.htm' },
					{ title: '临沂市人民政府关于加快现代物流业发展的意见', url: 'http://www.linyi.gov.cn/info/9319/332862.htm' },
					{ title: '临沂加速迈向“国际物流之都”--《关于构建国际物流大通道的实施方案》的解读', url: 'https://app.langya.cn/a/808929.html' },
				], // 政策列表
				data_list: [], // 合作线路

				curr_query: '1', // 记录当前查询的类型
				line_from: '临沂', // 查询线路的发货地
				line_to: '呼和浩特', // 查询线路的发货地
				com_name: '致胜', // 查询公司的名称
				order_no: '', // 查询运单的编号

				install_list: [],
				curr_ins: {}, // 记录当前操作的安装对象

				page: 1,
				limit: 20,
			}
		},

		onPullDownRefresh() {
			this.page = 1
			this.limit = 20
			this.getLogList()
		},

		mounted() {
			// console.log('current.ver=20250409.1433a');
			this.getLogList()
			isLogin() && this.sign()
		},

		onLoad(opts) {
			let that = this
			// 记录当前定位的地址(默认设置为华星物流办公楼 35.105287,118.289157)
			uni.setStorageSync('location_lat', 35.105287)
			uni.setStorageSync('location_lon', 118.289157)
		},

		onShow() {
			checkUpdate()
			let that = this
		},

		// 到达底部
		onReachBottom() {
			// console.log('已到达底部...');
		},

		methods: {

			// 点击查看物流政策
			onClickPolicy(item) {
				// fetch(item.url)
				// 	.then(response => response.text())
				// 	.then(data => {
				// 		let newString = data
				// 		if (data && data.includes('<!DOCTYPE html>')) {
				// 			newString = data.replace(/<!DOCTYPE html>/gi, '');
				// 		}
				// 		uni.setStorageSync('rich_text', newString)
				// 		uni.navigateTo({ url: `/pages/sys/rich_text?title=${item.title}` })
				// 	})
				// 	.catch(error => console.error('Error:', error))

				uni.showLoading({ title: '加载中', mask: true, })
				uni.request({
					url: item.url,
					success: (res) => {
						uni.hideLoading()
						let data = res.data
						let newString = data
						if (data && data.includes('<!DOCTYPE html>')) {
							// console.log('字符串包含<!DOCTYPE html>');
							// data.replace('<!DOCTYPE html>', '')
							newString = data.replace(/<!DOCTYPE html>/gi, '');
						}
						uni.setStorageSync('rich_text', newString)
						uni.navigateTo({ url: `/pages/sys/rich_text?title=${item.title}` })
					},
					fail: (res) => {
						uni.hideLoading()
					}
				})

			},

			// 点击大菜单
			onMenu(menu) {
				if (menu == 1) {
					uni.navigateTo({ url: '/pages/delivery/delivery' })
				} else if (menu == 2) {
					uni.navigateTo({ url: '/pages/logcom/park_list' })
				}
			},

			// 点击线路item
			onItemClick(item) {
				console.log(`item = `, item);
				uni.navigateTo({ url: `/pages/logcom/logcom_detail?id=${item.id}&name=${item.company_name}` })
			},

			onInputLineFrom(e) {
				this.line_from = e.detail.value
			},

			onInputLineTo(e) {
				this.line_to = e.detail.value
			},

			onInputCom(e) {
				this.com_name = e.detail.value
			},

			onInputOrder(e) {
				this.order_no = e.detail.value
			},

			// 切换线路发到站
			onSwitchLine() {
				let tmp = this.line_from
				this.line_from = this.line_to
				this.line_to = tmp
			},

			// 立即查询
			onOk() {
				if (this.curr_query == 1) {
					if (!this.line_from || !this.line_to) {
						uni.showToast({ icon: 'none', title: '请输入发站到站' })
						return
					}
					uni.navigateTo({ url: `/pages/logcom/query_logcom?type=1&from=${this.line_from}&to=${this.line_to}` })
				} else if (this.curr_query == 2) {
					if (!this.com_name) {
						uni.showToast({ icon: 'none', title: '请输入公司名称' })
						return
					}
					uni.navigateTo({ url: `/pages/logcom/query_logcom?type=2&com=${this.com_name}` })
				} else if (this.curr_query == 3) {
					if (!this.order_no) {
						uni.showToast({ icon: 'none', title: '请输入运单号' })
						return
					}
					uni.navigateTo({ url: `/pages/logcom/query_logcom?type=3&order=${this.order_no}` })
				}
			},

			// 语音搜索
			onOk2() {
				uni.showToast({ icon: 'none', title: '暂不支持' })
			},

			// 切换查询
			onChangeQuery(item) {
				this.curr_query = item
			},

			// 扫码评价
			onEvaluate(item) {
				this.curr_ins = item // 记录当前点击的条目
				// uni.navigateTo({ url: `/pages/evaluate/evaluate?install_id=${item.id}` })
				this.onShowQrCode()
			},

			// 打开导航
			onNavigate(item) {
				console.log('item = ', item);
				if (!item.latitude || !item.longitude) {
					uni.showToast({ icon: 'none', title: '位置有误，导航失败' })
					return
				}
				openLocation(parseFloat(item.latitude), parseFloat(item.longitude))
			},

			// 拨打电话
			onPhone(item) {
				if (!item || !item.servicephone) {
					uni.showToast({ icon: 'none', title: '未录入号码' })
					return
				}
				uni.makePhoneCall({ phoneNumber: `${item.servicephone}` })
			},

			// 查看照片
			onCheckImg(url) {
				uni.previewImage({
					urls: [url],
					success: (res) => {

					},
					fail: (res) => {
						uni.showToast({ icon: 'none', title: '查看图片失败' })
					}
				})
			},

			// 上传图片
			onUpload(item) {
				uni.showToast({ icon: 'none', title: '上传图片' })
				// uni.navigateTo({ url: '/pages/order_detail/order_detail' })
				uni.navigateTo({
					url: `/pages/order_detail/order_detail?detail=${JSON.stringify(item)}`
				})
			},

			// 二维码
			onShowQrCode() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('center')
			},

			onClosePop() {
				this.$refs.popup.close()
			},

			// 生成二维码文本数据
			genQrContent() {
				const url = 'http://install.niuniuhaohan.com' // 正式站
				return `${url}/#/pages/evaluate/evaluate?install_id=${this.curr_ins.id}`
			},

			// 接口:根据物流公司名称查询 
			async getLogList() {
				let that = this
				let token = getUInfo().token
				uni.showLoading({ title: '加载中', mask: true, })
				// let res = await that.$getLogList({ page: 1, limit: 20, logistics_name: '致胜' })
				let res = await that.$getLogList({ page: 1, limit: 20, is_recommend: '1' })
				if (res.code == 1) {
					this.data_list = res.data.data
				} else {
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},

			// 接口:用户签到
			async sign() {
				let that = this
				let token = getUInfo().token
				// uni.showLoading({ title: '处理中', mask: true, })
				let res = await that.$sign({ token })
				// console.log(`$sign...res = `, res)
				if (res.code == 1) {

				} else {
					// uni.showToast({ title: res.msg, icon: 'none' })
				}
			},

			timestampToDateFormat(ts) {
				return timestampToYMDHM(1000 * ts)
			},

		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		position: relative;
		background-color: #F8F8F8;
	}

	.policy_div {
		width: calc(100% - 48rpx);
		margin: 24rpx;
		align-self: center;
		border-radius: 16rpx;
		background-color: white;
	}

	.policy_txt {
		/* 防止文本换行 */
		white-space: nowrap;
		/* 隐藏溢出的内容 */
		overflow: hidden;
		/* 显示省略符号来代表被修剪的文本 */
		text-overflow: ellipsis;
		max-width: 95%;
	}

	.item_div {
		margin: 24rpx 0 24rpx 24rpx;
		font-size: 28rpx;
	}

	.fh_div {
		display: flex;
		width: calc(100% - 48rpx);
		margin: 0 24rpx 0 24rpx;
	}

	.fh_item {
		flex-grow: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 140rpx;
		background-color: white;
		border-radius: 16rpx;
	}

	.fh_txt {
		font-weight: bold;
		font-size: 32rpx;
		margin: 0 20rpx 0 0;
	}

	.query_div {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: calc(100% - 48rpx);
		margin: 0 24rpx 24rpx 24rpx;
		align-self: center;
		border-radius: 16rpx;
		background-color: white;
		margin: 24rpx 0 0 0;
	}

	.query_header {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		border-bottom: #FDD30D solid 1rpx;
	}

	.query_item {
		width: 33.33%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
	}

	.query_item_sel {
		width: 33.33%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		color: white;
		background-color: #FDD30D;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
	}

	.et_line {
		width: 40%;
		height: 106rpx;
		line-height: 106rpx;
		font-size: 36rpx;
		font-weight: bold;
		padding: 0 12rpx 0 12rpx;
		/* background-color: red; */
	}

	.et_com_order {
		width: 100%;
		height: 106rpx;
		line-height: 106rpx;
		font-size: 36rpx;
		font-weight: bold;
		padding: 0 12rpx 0 12rpx;
		/* background-color: red; */
	}

	.btn_ok_2 {
		background-color: #F7D34B;
		width: 90%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		margin: 24rpx 0 0 0;
		border-radius: 888rpx;
	}

	.btn_ok {
		width: 90%;
		height: 78rpx;
		line-height: 78rpx;
		/* color: #F7D34B; */
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		margin: 24rpx 0 0 0;
		border: solid 1rpx #F7D34B;
		border-radius: 888rpx;
	}

	.item_2_div {
		margin: 12rpx 24rpx 12rpx 24rpx;
		padding: 24rpx;
		background-color: white;
		border-radius: 16rpx;
	}

	.tag {
		border: #CB8450 solid 1rpx;
		color: #CB8450;
		font-size: 20rpx;
		padding: 0rpx 6rpx;
		border-radius: 8rpx;
	}

	.tag_txt {
		font-size: 24rpx;
		/* 防止文本换行 */
		white-space: nowrap;
		/* 隐藏溢出的内容 */
		overflow: hidden;
		/* 显示省略符号来代表被修剪的文本 */
		text-overflow: ellipsis;
		max-width: 85%;
		margin: 0 0 0 8rpx;
	}

	.install_list_div {
		display: flex;
		flex-direction: column;
		width: 100vw;
		margin: 88rpx 0 0 0;
	}

	.install_item {
		display: flex;
		flex-direction: column;
		/* height: 300rpx; */
		width: calc(100% - 80rpx);
		margin: 20rpx 20rpx 0 20rpx;
		padding: 20rpx;
		background-color: rgba(249, 233, 198, 1);
		/* background-color: rgba(237, 216, 171, 1); */
		/* background-color: rgba(219, 38, 29, 0.3); */
		overflow: scroll;
		/* overflow: hidden; */
		border-radius: 16rpx;
		font-size: 30rpx;
		color: black;
	}

	/* 锁体照片 */
	.img_lock {
		width: 60rpx;
		height: 60rpx;
		border-radius: 8rpx;
		margin: 0 16rpx 0 0;
	}

	/* 操作按钮容器 */
	.op_btn_div {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin: 20rpx 0 0 0;
	}

	.btn1 {
		width: 166rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		background-color: deepskyblue;
		color: white;
		margin: 0 0 0 20rpx;
		border-radius: 10rpx;
	}

	.btn2 {
		width: 166rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		background-color: yellowgreen;
		color: white;
		margin: 0 0 0 20rpx;
		border-radius: 10rpx;
	}

	.btn3 {
		width: 166rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		background-color: orangered;
		color: white;
		margin: 0 0 0 20rpx;
		border-radius: 10rpx;
	}


	/* pop弹窗样式 */
	.pop_div {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		width: 75vw;
		height: 48vh;
		background-color: white;
		border-radius: 20rpx;
	}

	.pop_div_1 {
		width: 100%;
		line-height: 84rpx;
		text-align: center;
		font-weight: bold;
	}

	.pop_div_2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		justify-content: space-between;
		height: 100%;
		width: 100%;
		padding: 20rpx 0 20rpx 0;
	}

	.pop_div_2_1 {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.pop_div_2_1_hint {
		font-size: 30rpx;
		color: rgba(0, 0, 0, 0.55);
		text-align: center;
	}

	.btn_refresh_qrcode {
		width: 140rpx;
		line-height: 50rpx;
		text-align: center;
		background-color: #1890FF;
		color: white;
		font-size: 22rpx;
		margin: 0 20rpx 0 20rpx;
	}

	.img_qrcode {
		width: 380rpx;
		height: 380rpx;
		border: solid 1rpx rgba(1, 1, 1, 0);
	}

	.pop_div_3 {
		width: 100%;
		line-height: 84rpx;
		text-align: center;
		font-weight: bold;
	}
</style>